<template>
  <div class="center">
    <h2>试题上传页</h2>
    <img
      :src="
        user.headerimg
          ? user.headerimg
          : `${$store.state.defaulheaderturl}user/user.jpg`
      "
      alt=""
    />
    <el-form
      border
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="年级" prop="test_grade">
        <el-select v-model="ruleForm.test_grade" placeholder="请选择年级">
          <el-option label="学前教育" value="0"></el-option>
          <el-option label="一年级" value="1"></el-option>
          <el-option label="二年级" value="2"></el-option>
          <el-option label="三年级" value="3"></el-option>
          <el-option label="四年级" value="4"></el-option>
          <el-option label="五年级" value="5"></el-option>
          <el-option label="六年级" value="6"></el-option>
          <el-option label="七年级" value="7"></el-option>
          <el-option label="八年级" value="8"></el-option>
          <el-option label="九年级" value="9"></el-option>

          <el-option label="高一" value="10"></el-option>
          <el-option label="高二" value="11"></el-option>
          <el-option label="高三" value="12"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="科目" prop="test_project">
        <el-select v-model="ruleForm.test_project" placeholder="请选择科目">
          <el-option label="语文" value="1"></el-option>
          <el-option label="数学" value="2"></el-option>
          <el-option label="外语" value="3"></el-option>
          <el-option label="政治" value="4"></el-option>
          <el-option label="历史" value="5"></el-option>
          <el-option label="地理" value="6"></el-option>
          <el-option label="物理" value="7"></el-option>
          <el-option label="化学" value="8"></el-option>
          <el-option label="生物" value="9"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="用户id" prop="_id" style="display: none">
        <el-input type="text" v-model="ruleForm.user_id"></el-input>
      </el-form-item>

      <el-form-item label="试题类型" prop="test_type">
        <el-select v-model="ruleForm.test_type" placeholder="请选择试题类型"  @change="handleSelect">
          <el-option label="单项选择题" value="1"></el-option>
          <el-option label="多项选择题" value="2"></el-option>
          <el-option label="填空题" value="3"></el-option>
          <el-option label="判断题" value="4"></el-option>
          <el-option label="解答题" value="5"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="关键字描述" prop="test_describe">
        <el-input type="text" v-model="ruleForm.test_describe"></el-input>
      </el-form-item>

      <el-form-item label="答案" prop="test_answer" v-if="ruleForm.test_type">
        <!-- 单选 -->
        <template v-if="ruleForm.test_type == 1">
          <el-radio v-model="ruleForm.test_answer" label="A">A</el-radio>
          <el-radio v-model="ruleForm.test_answer" label="B">B</el-radio>
          <el-radio v-model="ruleForm.test_answer" label="C">C</el-radio>
          <el-radio v-model="ruleForm.test_answer" label="D">D</el-radio>
        </template>

        <!-- 多选 -->
        <el-checkbox-group
          v-if="ruleForm.test_type == 2"
          v-model="ruleForm.test_answer"
        >
          <el-checkbox label="A">
            <span> A </span>
          </el-checkbox>
          <el-checkbox label="B">
            <span> B </span>
          </el-checkbox>
          <el-checkbox label="C">
            <span> C </span>
          </el-checkbox>
          <el-checkbox label="D">
            <span> D </span>
          </el-checkbox>
        </el-checkbox-group>
        <!-- 填空题 多个答案以空格隔开 -->

        <el-input
          placeholder="多个答案以空格隔开"
          v-if="ruleForm.test_type == 3"
          type="text"
          v-model="ruleForm.test_answer"
        ></el-input>

        <!-- 判断题 -->
        <template v-if="ruleForm.test_type == 4">
          <el-radio v-model="ruleForm.test_answer" label="0">√</el-radio>
          <el-radio v-model="ruleForm.test_answer" label="1">×</el-radio>
        </template>

        <!-- 解答题 -->
        <quill-editor
          v-if="ruleForm.test_type == 5"
          :options="editorOption"
          v-model="ruleForm.test_answer"
        ></quill-editor>
      </el-form-item>

      <!-- 试题核心内容 -->
      
      <el-form-item label="试题内容" prop="test_content">
        <quill-editor
          :options="editorOption"
          v-model="ruleForm.test_content"
        ></quill-editor>
      </el-form-item>

      <!-- 答案解析 -->
      <el-form-item label="详细解析" prop="test_analysis">
        <quill-editor
          :options="editorOption"
          v-model="ruleForm.test_analysis"
        ></quill-editor>
      </el-form-item>


      <el-form-item class="fixcenter">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Comheader from "@/components/common/Comheader.vue";
export default {
  data() {
    return {
      user: {},
      content: null,
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            // [{'direction': 'rtl'}],                         // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            [{ font: [] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            ["link", "image", "video"], // 链接、图片、视频
          ], //工具菜单栏配置
        },
        placeholder: "请在这里添加产品描述", //提示
        readyOnly: false, //是否只读
        theme: "snow", //主题 snow/bubble
        syntax: true, //语法检测
      },
      ruleForm: {
        test_content:"",
        test_answer: [],
        test_grade: "",
        test_project: "",
        test_type: "",
        test_describe: "",
        test_analysis: "",
        user_id: "",
      },
      rules: {
          test_content: [
          { required: true, message: "请填写具体的试题内容", trigger: "blur" },
        ],
        test_grade: [
          { required: true, message: "请选择年级", trigger: "blur" },
        ],
        test_answer: [
          { required: true, message: "请填写具体的答案", trigger: "blur" },
        ],
        test_describe: [
          { required: true, message: "请填写具体的试题描述", trigger: "blur" },
        ],
         test_analysis: [
          { required: true, message: "请填写具体的答案解析", trigger: "blur" },
        ],

        test_type: [
          {
            required: true,
            message: "请选择试题类型",
            trigger: "blur",
          },
        ],
        test_project: [
          {
            required: true,
            message: "请选择试题所属科目",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.ruleForm.user_id = JSON.parse(window.sessionStorage.getItem("user"))._id;
    this.user = JSON.parse(window.sessionStorage.getItem("user"));

    //初始化轻音乐的播放
    this.$store.commit("setShowData", this.user.user_music_isplay);
  },
  components: {
    Comheader,
  },
  methods: {
    //题型改变事件
    handleSelect(val){
      console.log(val)
      if(val==2){
        this.ruleForm.test_answer=[]
      }else{
        this.ruleForm.test_answer=""
      }
    },
    //退出
    outLogin() {
      window.sessionStorage.removeItem("token");
      window.sessionStorage.removeItem("user");
      this.$message.success("退出登录成功");
      this.$router.push("/");
    },
    //返回
    fh() {
      this.$router.go(-1);
    },
    //提交
    submitForm(formName) {
      // console.log(this.ruleForm.test_answer);
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let data = await this.$http.post(
            "test/newTest",
            this.ruleForm
          );
          // console.log(data.data.data);
          if (data.status == 200) {
            this.$message.success(data.data.message);
            
          }
        } else {
          this.$message.error(data.data.message);
          // return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
h2 {
  text-align: center;
  height: 40px;
  line-height: 40px;
  margin-bottom: 20px;
}
.contan {
  padding-bottom: 30px !important;
}
#app {
  min-height: 100vh;
  width: 100vw;
}
.center {
  padding: 20px 10px;
  //   border: 1px solid #ccc;
  border-radius: 5px;
  width: 850px;
  margin: 20px auto;
  position: relative;
  padding-top: 0;
  img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    right: 35px;
    top: 48px;
  }
}

@Color: #409eff;
.el-containe {
  min-height: 100vh;
}
.outline {
  position: absolute;
  right: 50px;
  top: 25px;
  // width: 30px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  i {
    font-size: 30px;
    &:hover {
      color: @Color;
    }
  }
}
.el-header {
  height: 80px !important;
  background-color: #ccc;
  line-height: 80px;
  padding-left: 30px;
  position: relative;
  .fh {
    cursor: pointer;
    position: absolute;
    left: 50px;
    top: 25px;
    // width: 30px;
    height: 30px;
    line-height: 30px;
  }
  .userheader {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #898989;
    position: absolute;
    top: 15px;
    left: 30px;
  }
  h1 {
    text-align: center;
    color: @Color;
  }
}
</style>